<!-- BannerListView.vue -->
<script setup>
import { ref, reactive, onMounted } from "vue";
import { getBannerListFn, editBannerFn, delBannerFn } from "@/api/banner";
import { Delete, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

// 轮播图列表数据和分页参数
const bannerList = ref([]);
const length = ref(0);
const currentPage = ref(1);
const dialogVisible = ref(false);
const type = ref("10010"); // 10010 添加，10011 修改

// 轮播图表单数据
const formData = reactive({
    id: "",
    title: "",
    url: ""
});

// 获取轮播图列表
const fetchBannerList = () => {
    getBannerListFn({
        count: currentPage.value,
        pageSize: 10,
    }).then((res) => {
        bannerList.value = res.data.bannerList;
        length.value = res.data.length;
    });
};

// 页面加载时获取轮播图列表
onMounted(fetchBannerList);

// 分页切换
const currentChange = () => {
    fetchBannerList();
};

// 提交添加轮播图表单
const submitClick = () => {
    dialogVisible.value = false;
    formData.id = "id-" + Math.random().toString(36).substr(2, 9);

    addBannerFn(formData).then((res) => {
        ElMessage.success(res.message);
        formData.id = "";
        formData.title = "";
        formData.url = "";
        fetchBannerList();
    });
};

// 删除轮播图
const delClick = (id) => {
    delBannerFn({ id }).then((res) => {
        ElMessage.success(res.message);
        fetchBannerList();
    });
};

// 打开编辑对话框
const editClick = (banner) => {
    type.value = "10011";
    dialogVisible.value = true;
    Object.assign(formData, banner);
};

// 提交编辑轮播图
const editSubmitClick = () => {
    editBannerFn(formData).then((res) => {
        dialogVisible.value = false;
        ElMessage.success(res.message);
        formData.id = "";
        formData.title = "";
        formData.url = "";
        fetchBannerList();
    });
};


</script>

<template>
    <div>
        <header>
            <h2>轮播图列表</h2>
        </header>

        <!-- 轮播图列表 -->
        <el-table :data="bannerList" stripe style="width: 100%" border>
            <el-table-column type="index" label="编号" width="60">
                <template #="{ $index }">
                    <span>{{ $index + 1 + (currentPage - 1) * 10 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="120"></el-table-column>
            <el-table-column prop="url" label="图片链接"></el-table-column>
            <el-table-column label="操作">
                <template #="data">
                    <el-button type="primary" :icon="Edit" @click="editClick(data.row)"></el-button>
                    <el-button type="danger" :icon="Delete" @click="delClick(data.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
                @current-change="currentChange"
                v-model:current-page="currentPage"
                background
                layout="prev, pager, next"
                :page-size="10"
                :total="length"
            />
        </div>
    </div>

    <!-- ----------- 添加/编辑弹出框 -------------- -->
    <el-dialog
        v-model="dialogVisible"
        :title="'修改轮播图'"
        width="600"
    >
        <el-form :model="formData" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="formData.title" placeholder="请输入轮播图标题" />
            </el-form-item>

            <el-form-item label="图片链接">
                <el-input v-model="formData.url" placeholder="请输入轮播图图片链接" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button v-if="type == '10010'" type="primary" @click="submitClick">提交</el-button>
                <el-button v-else @click="editSubmitClick">修改</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
h2{
    padding-left: 20px;
}
header {
    display: flex;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    h2 {
        display: inline-block;
    }
}

.pagination {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
}
</style>
